﻿@page "/example-upload"

<RadzenExample Name="Upload">
<div class="row">
    <div class="col-md-6">
        <h3>Single file upload</h3>
        <RadzenUpload Url="upload/single" Style="margin-bottom: 20px;"
                        Progress="@((args) => OnProgress(args, "Single file upload"))"  />
        <br />
        <h3>Multiple files upload</h3>
        <RadzenUpload Multiple="true" Url="upload/multiple"  Style="margin-bottom: 20px;"
                        Progress="@((args) => OnProgress(args, "Multiple files upload"))" />
        <br />
        <h3>Upload images only</h3>
        <RadzenUpload Multiple="true" Accept="image/*" Url="upload/multiple" Style="margin-bottom: 20px;"
                        Progress="@((args) => OnProgress(args, "Images only upload"))"  />
        <br />
        <h3>Upload with additional parameter</h3>
        <RadzenUpload Multiple="true" Accept="image/*" Url=@($"upload/{1}") Style="margin-bottom: 20px;"
                        Progress="@((args) => OnProgress(args, "Upload with additional parameter"))"  />
        <br />
    </div>
    <div class="col-md-6">
        <h3>Events</h3>
        <RadzenCard style="overflow: auto;height:500px;">
            <RadzenProgressBar Value="@progress" Unit="@info" Visible="@(progress > 0)" Style="margin-bottom: 20px" />
        </RadzenCard>
    </div>
</div>
</RadzenExample>

@code {
    int progress;
    string info;

    void OnProgress(UploadProgressArgs args, string name)
    {
        this.info = $"% '{name}' / {args.Loaded} of {args.Total} bytes.";
        this.progress = args.Progress;
    }
}